<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  <!-- jQuery还是尽量从本地引入...依靠网络的话,将存在很多不可靠因素... -->
  <script src="js/jquery-3.7.1.min.js"></script>
  <script>
    function login() {
      // 这里不使用form表达提交了,使用Ajax
      $.ajax({  // 这并非是原生的Ajax请求,是jQuery封装后的
        type:"post",
        url:"/user/login",
        data:{  // data表示让ajax提交的数据
          "userName":$("#userName").val(), // 获取值
          "password":$("#password").val() // 获取值
        },
        success:function(result){ // success表示成功后的逻辑,result是后端返回的结果,起啥名都可以
          if(result) {    //若后端返回的是true
            // 跳转index页面
            location.href="index.html";
          } else {
            // 就在当前页面
            alert("用户名或密码错误!");
          }
        }
      });
    }

  </script>
</body>

</html>

